<template>
  <div>

    <el-carousel :height="screenHeight + 'px'" direction="vertical" :autoplay="true" ref="carousel">
      <el-carousel-item v-for="item in backgroundImages" :key="item">
        <el-image :src="item" style="width: 100%; height: 100%;"></el-image>
      </el-carousel-item>
    </el-carousel>

    <div style="position: fixed; top: 20px; left: 20px; z-index: 1000">
      <label style="color: #E6A23C">天爱友情验证码Vue2版</label>
    </div>

    <div style="position: fixed; top: 20px; right: 20px; z-index: 1000">
      <el-button type="warning" @click="openLoginForm">登 录</el-button>
    </div>

    <!--  登录表单  -->
    <el-dialog :title="title" :visible.sync="formOpen" v-if="formOpen" :modal="false" :close-on-click-modal="false"
               custom-class="login-form" center
               append-to-body style="display: flex; justify-content: center; align-items: center;" top="0vh">
      <el-form ref="loginForm" :model="loginForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off"
                    placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
          >
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleLogin"
          >
            <span>登 录</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  验证码弹框  -->
    <el-dialog :visible.sync="captchaOpen" v-if="captchaOpen" :modal="false"
               :close-on-click-modal="true" :show-close="false" fullscreen
               :append-to-body="true" :modal-append-to-body="false" custom-class="captcha-modal"
               :destroy-on-close="true">
      <CaptchaIndex type="SLIDER" :title="'滑动'" :titleFontSize="12" titleColor="#E6A23C" :borderRadius="5"
                    :bgImageWidth="300" :bgImageHeight="300" @closeCaptcha="closeCaptcha" ref="captchaIndex"
                    @refreshCaptcha="refreshCaptcha" @validateCaptcha="validateCaptcha"></CaptchaIndex>
    </el-dialog>

  </div>

</template>

<script>
import CaptchaIndex from "@/components/Captcha/CaptchaIndex";

export default {
  name: 'Login',
  components: {CaptchaIndex},
  data() {
    return {
      screenHeight: document.body.clientHeight,

      backgroundImages: [
        require('@/assets/6328967_0_final.png'),
        require('@/assets/6329999_0_final.png'),
        require('@/assets/6329195_0_final.png'),
        require('@/assets/6329504_0_final.png'),
        require('@/assets/6329505_0_final.png'),
        require('@/assets/6329998_0_final.png'),
      ],
      title: '登录',

      loginForm: {
        username: "admin",
        password: "admin",
      },
      formOpen: false,

      // 验证弹框开关
      captchaOpen: false,

    }
  },
  created() {
  },
  mounted() {
    this.screenHeight = document.documentElement.clientHeight;

    // 重写element ui 事件
    this.$refs['carousel'].handleMouseEnter = function () {
    }

  },
  methods: {
    openLoginForm() {
      if (!this.formOpen) {
        this.formOpen = true;
      }
    },

    handleLogin() {
      if (!this.captchaOpen) {
        this.captchaOpen = true;
      }
    },

    // 关闭验证码弹框
    closeCaptcha() {
      if (this.captchaOpen) {
        this.captchaOpen = false;
      }
    },
    // 刷新验证码
    refreshCaptcha() {
      // console.log("refreshCaptcha...")
      // refresh after do sth...
    },

    // 验证码验证
    validateCaptcha(data) {
      console.log('login data ===> ', data);
      if (data) {
        this.$message({
          message: '验证通过！',
          type: 'success'
        })
      } else {
        this.$message({
          message: '验证不通过，请重试！',
          type: 'error'
        })
      }

      // do login...
      this.login();
    },

    login() {
      // login...
    }
  }
}
</script>
<style>

.login-form {
  border-radius: 6px;
  background: rgba(255, 255, 255, .6);
  width: 400px;
  height: 400px;
}

.el-dialog {
  position: relative;
  /* margin: 0 auto 50px; */
  border-radius: 2px;
  width: 50%;
}

.el-dialog.is-fullscreen {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0)
}
</style>
